<template>
    <dv-border-box-7  :color="['#084FA0','#06073B']" style="height: 266px;">
        <div class="wisdom-box">
        <div class="title-box">
            <span>智慧助餐</span>
        </div>
        <!-- 条形图 -->
        <div class="bar" ref="barechart"></div>
    </div>
    </dv-border-box-7>

</template>

<script>
import * as echarts from "echarts"

export default {
    data() {
        return {

        }
    },
    mounted() {
        const bardom = document.querySelector(".bar")
        const barEchart = echarts.init(bardom)

        const options = {
            legend:{
                show:true,
                top:0,
                right:10,
                itemGap:20,
                itemWidth:15,
                itemHeight:15,
                icon:"rick",
                textStyle:{
                    color:"#4FA6F7"
                },
                data:[
                    {
                        name:"销售额(万元)",
                        itemStyle:{
                            color:"#1CDBFE"
                        }
                    },
                    {
                        name:"会员数",
                        itemStyle:{
                            color:"#FB9A44"
                        }
                    }
                ]
            },
            tooltip:{
                show:true,
                trigger:"axis",
                axisPointer:{
                    type:"none"
                },
                backgroundColor:"rgba(0,1,39,0.8)",
                borderColor:"#084FA0",
                textStyle:{
                    color:"#fff"
                },
                formatter:function(val){
                    console.log(val,"<<<=== val");
                    return val[0].name+"<br/>"+val[0].seriesName+" : "+val[0].value
                }
            },

            grid: [
                {
                    left: "4%",
                    top: "15%",
                    bottom: "5%",
                    width: "35%",
                    containLabel: true,
                },
                {
                    top: "25%",
                    bottom: "5%",
                    left: "60%",
                    // width: "20%",
                },
                {
                    top: "15%",
                    right: "4%",
                    bottom: "5%",
                    width: "33%",
                    containLabel: true,
                }
            ],
            xAxis: [
                {
                    type: "value",
                    inverse: true,//反向
                    position: "top",
                    axisLabel: {
                        show: true,
                        color:"#4FA6F7"
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    // splitNumber:2,
                },
                {
                    gridIndex: 1,
                    show: true
                },
                {
                    type: "value",
                    gridIndex: 2,
                    position: "top",
                    axisLabel: {
                        show: true,
                        color:"#4FA6F7"
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    type: "category",
                    position: "right",
                    inverse: true,
                    axisLabel: {
                        show: false,
                        color: "#fff"
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    // data: ["迪岭村老年助餐点", "横江社区助餐点", "万宁社区助餐点", "锦溪北日照中心","杨木桥日照中心","观澜名苑社区"]
                },
                {
                    type: "category",
                    gridIndex: 1,
                    inverse: true,
                    position: "center",
                    offset:32,//偏移
                    axisLabel: {
                        align: "center",
                        color: "#fff"
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    data: ["南浔综合为老服务中心", "城南社区", "浔南社区老年食堂","石淙镇居家养老服务中心","横街居家养老服务照料中心","武康街道幸福"]
                },
                {
                    type: "category",
                    gridIndex: 2,
                    inverse: true,
                    position: "left",
                    axisLabel: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                  data: ["南浔综合为老服务中心", "城南社区", "浔南社区","石淙镇居家养老服务中心","横街居家养老服务照料中心","武康街道幸福"]
                }
            ],
            series: [
                {
                    name:"销售额(万元)",
                    type: "bar",
                    barWidth: 15,
                    label: {
                        show: false,
                    },
                    itemStyle: {
                        borderRadius: [10, 0, 0, 10],
                        color:new echarts.graphic.LinearGradient(1,0,0,0,[
                            {
                                offset:0,
                                color:"rgba(23,38,91,0.1)"
                            },
                            {
                                offset:1,
                                color:"rgba(28,219,254)"
                            }
                        ])
                    },
                    data: [

                        {
                            name: "南浔综合为老服务中心",
                            value: 202.8
                        },
                      {
                        name: "城南社区老年",
                        value: 156
                      },
                      {
                        name: "浔南社区老年",
                        value: 113.1
                      },

                      {
                        name: "石淙镇居家养老服务中心",
                        value: 101.4
                      },

                      {
                        name: "横街居家养老服务照料中心",
                        value: 72
                      },
                      {
                        name: "武康街道幸福",
                        value: 25
                      },


                    ]
                },
                {
                    name:"会员数",
                    type: "bar",
                    barWidth: 15,
                    xAxisIndex: 2,
                    yAxisIndex: 2,
                    label: {
                        position: "right"
                    },
                    itemStyle: {
                        borderRadius: [0, 10, 10, 0],
                        color:new echarts.graphic.LinearGradient(0,0,1,0,[
                            {
                                offset:0,
                                color:"rgba(23,38,91,0.1)"
                            },
                            {
                                offset:1,
                                color:"rgba(251,154,68)"
                            }
                        ])
                    },
                    data: [
                        {
                            name: "南浔综合为老服务中心",
                            value: 620
                        },
                        {
                            name: "城南社区老",
                            value: 530
                        },
                        {
                            name: "浔南社区",
                            value: 450
                        },
                      {
                        name: "石淙镇居家养老服务中心",
                        value: 420
                      },
                      {
                        name: "横街居家养老服务照料中心",
                        value: 310
                      },
                      {
                        name: "武康街道幸福",
                        value: 1500
                      },

                    ]
                }
            ]

        }

        // const options = {

        //     grid: {
        //         left: '2%',
        //         right: '2%',
        //         bottom: '2%',
        //         top: '2%',
        //         containLabel: true
        //     },
        //     xAxis: {
        //         show: false,
        //         type: 'value'
        //     },
        //     yAxis: [
        //         {
        //             type: 'category',
        //             inverse: true,
        //             axisLabel: {
        //                 show: true,
        //                 textStyle: {
        //                     color: '#fff'
        //                 },
        //             },
        //             splitLine: {
        //                 show: false
        //             },
        //             axisTick: {
        //                 show: false
        //             },
        //             axisLine: {
        //                 show: false
        //             },
        //             data: ["安徽省","河南省","浙江省","湖北省","贵州省","江西省","江苏省","四川省","云南省","湖南省"]
        //         },
        //         {
        //             type: 'category',
        //             inverse: true,
        //             axisTick: 'none',
        //             axisLine: 'none',
        //             show: true,
        //             axisLabel: {
        //                 textStyle: {
        //                     color: '#ffffff',
        //                     fontSize: '12'
        //                 },
        //             },
        //             data:[239,181,154,144,135,117,74,72,67,55]
        //         }
        //     ],
        //     series: [
        //         {
        //             name: '值',
        //             type: 'bar',
        //             zlevel: 1,
        //             itemStyle: {
        //                 normal: {
        //                     barBorderRadius: 30,
        //                     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
        //                         offset: 0,
        //                         color: 'rgb(57,89,255,1)'
        //                     }, {
        //                         offset: 1,
        //                         color: 'rgb(46,200,207,1)'
        //                     }]),
        //                 },
        //             },
        //             barWidth: 20,
        //             data: [239,181,154,144,135,117,74,72,67,55]
        //         },
        //         {
        //             name: '背景',
        //             type: 'bar',
        //             barWidth: 20,
        //             barGap: '-100%',
        //             itemStyle: {
        //                 normal: {
        //                     color: 'rgba(24,31,68,1)',
        //                     barBorderRadius: 30,
        //                 }
        //             },
        //         },
        //     ]
        // }

        barEchart.setOption(options)
    }
}

</script>

<style lang="scss" scoped>
.dv-border-box-7{
    border-radius: 3px;
}

:deep(.dv-border-svg-container) {
  display: none;
}

.wisdom-box {
    box-sizing: border-box;
    height: 100%;
}

.title-box {
    margin-top: 22px;
    margin-left: 41px;

    & span {
        font-size: 22px;
        color: #1CDBFE;
        font-family: SourceHanSansCN-Light;
    }

    ;

    & span::before {
        content: "";
        display: block;
        position: absolute;
        width: 13px;
        height: 27px;
        background-color: #1CDBFE;
        border-radius: 6px;
        top: -2px;
        left: 17px;
    }

}

.bar {
    height: 210px;
    // border: 1px solid red;
}
</style>
